<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import headerUtil from "./base/common/headerUtil.vue";
import orderStatusUtil from "./base/order/orderStatusUtil.vue";
import reqApis from "../req/reqApis.js";
import Utils from "../req/Utils.js";

const currentData = ref<any>({
  headerObj:{
    showType: 2
  },
  orderId: router.currentRoute.value.query.orderId,
  order: {}
});

const getOrderByIdFn = () => {
  let params ={
    orderId: currentData.value.orderId
  }
  reqApis.getOrderByIdApi(params).then(res => {
    currentData.value.order = res.data;
  })
};
getOrderByIdFn();
</script>
<template>
  <section class="orderDetail" v-if="currentData.order">
    <headerUtil :obj="currentData.headerObj">订单详情</headerUtil>
    <div class="main">
      <orderStatusUtil :obj="currentData.order"></orderStatusUtil>
      <div class="userInfo">
        <div class="item"><label>商品金额：</label><p>￥ {{currentData.order.orderAmount}}</p></div>
        <div class="item"><label>收货地址：</label><p>{{currentData.order.buyerAddress}}</p></div>
        <div class="item"><label>收货人：</label><p>{{currentData.order.buyerName}} {{currentData.order.buyerPhone}}</p></div>
        <div class="item"><label>订单店铺：</label><p>{{currentData.order.shopName}}</p></div>
      </div>
      <div class="content">
        <div class="title" v-if="currentData.order.orderDetailList">共计 {{currentData.order.orderDetailList.length}} 商品</div>
        <div class="product" v-for="item in currentData.order.orderDetailList">
          <div class="productIcon" :style="{background: `url(${item.productIcon}) no-repeat center`}"></div>
          <div class="desc">
            <div class="name">{{item.productName}}</div>
            <div class="wrap">
              <div class="money">￥{{item.productPrice}}</div>
              <div class="number">x{{item.productQuantity}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </section>
</template>

<style lang="less" scoped>
.orderDetail {
  width: 3.75rem;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  .main {
    flex: 1;
    overflow-y: auto;
    .userInfo {
      background: white;
      padding: .08rem .1rem;
      line-height: .21rem;
      margin-bottom: .15rem;
      .item {
        display: flex;
        font-size: .14rem;
        label {
          color: #999;
          padding-right: .05rem;
        }
        p {
          color: #151515;
          flex: 1;
      }
    }
  }
  .content {
    background: white;
    .title {
      display: flex;
      align-items: center;
      height: .46rem;
      padding: 0 .1rem;
      border-bottom: .01rem solid #e5e5e5;
      font-size: .14rem;
      color: #999;;
    }
    .product {
      padding: .1rem;
      border-bottom: .01rem solid #e5e5e5;
      display: flex;
      .productIcon {
        width: .75rem;
        height: .75rem;
        background-size: cover !important;
        margin-right: .1rem;
      }
      .desc {
        height: .75rem;
        flex: 1;
        display: flex;
        .name {
          flex: 1;
          font-size: .14rem;
          line-height: .25rem;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .wrap {
          width: .4rem;
          line-height: .16rem;
          font-size: .12rem;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .money {
            color: #e93b3d;
          }
          .number {
            color: #999;
          }
        }
        
      }
    }
  }
  }
  
}
</style>

